<template>
  <div id="Map" style="width: 100%; height: 100%" />
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  name: 'MaskMap',
  data() {
    return {
      map: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // eslint-disable-next-line no-undef
      AMapLoader.load({
        key: 'dd06077e770b56c4f0a313c520a4d781', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['Map3D', 'AMap.DistrictSearch', 'AMap.MouseTool', 'AMap.PolyEditor'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // eslint-disable-next-line no-undef
          this.map = new AMap.Map('Map', {
            center: [119.978742, 30.273705],
            disableSocket: true,
            viewMode: '3D',
            showLabel: false,
            labelzIndex: 130,
            pitch: 40,
            zoom: 14,
            layers: [
              // eslint-disable-next-line no-undef
              new AMap.TileLayer.RoadNet({
                // rejectMapMask:true
              }),
              // eslint-disable-next-line no-undef
              new AMap.TileLayer.Satellite()
            ]
          });
          const that = this
          const path = [[119.955645, 30.295558], [119.957941, 30.268132], [119.983279, 30.281261]]
          const polygon = new AMap.Polygon({
            path: path,
            fillColor: '#00b0ff',
            strokeColor: '#80d8ff',
            lineJoin: 'round' // 折线拐点连接处样式
          });
          that.map.add(polygon);
          // 实例化图形编辑
          const polyEditor = new AMap.PolyEditor(that.map, polygon);
          console.log('polyEditor', polyEditor.open)
          polyEditor.open();
          polyEditor.on('addnode', function(event) {
            console.info('触发事件：addnode')
          })

          polyEditor.on('adjust', function(event) {
            console.log('你动我了', event, polygon.getPath());
            that.setArea(AMap, polygon.getPath())
            // 编辑了
          })

          polyEditor.on('removenode', function(event) {
            console.info('触发事件：removenode')
          })

          polyEditor.on('end', function(event) {
            // event.target 即为编辑后的多边形对象
            // 多边形的坐标
            console.log(event.target.getPath())
          })
        })
        .catch((e) => {
          console.log(e);
        });
    },
    setArea(AMap, path) {
      const area = Math.round(AMap.GeometryUtil.ringArea(path));
      this.$emit('set-area', area)
    }
  }
};
</script>

<style>
#mapContent {
  background-color: transparent !important;
}
</style>
